<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业管道安全巡检系统 - 原型展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .prototype-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
        .pc-prototype {
            width: 100%;
            height: 800px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }
        .mobile-prototype {
            width: 375px;
            height: 812px;
            border: 8px solid #000;
            border-radius: 40px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .mobile-prototype::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: #000;
            border-radius: 0 0 10px 10px;
            z-index: 10;
        }
        .section-title {
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #1f2937;
        }
    </style>
</head>
<body class="bg-gray-100">
    <header class="bg-blue-600 text-white p-4">
        <h1 class="text-2xl font-bold text-center">工业管道安全巡检系统 - 原型展示</h1>
        <p class="text-center mt-2 opacity-90">Industrial Pipeline Safety Inspection System Prototypes</p>
    </header>

    <main class="container mx-auto p-6">
        <!-- PC端原型展示 -->
        <section class="mb-12">
            <h2 class="section-title">PC端管理后台原型</h2>
            <div class="prototype-container">
                <!-- 登录页面 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">登录页面</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/login.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 主控制台 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">主控制台</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/dashboard.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 线路管理 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">线路管理</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/line-management.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 巡检管理 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">巡检管理</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/inspection-management.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 缺陷管理 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">缺陷管理</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/defect-management.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 统计报表 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">统计报表</h3>
                    <div class="pc-prototype">
                        <iframe src="pc/statistics.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </section>

        <!-- 移动端原型展示 -->
        <section>
            <h2 class="section-title">移动端App原型</h2>
            <div class="prototype-container">
                <!-- 登录页面 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">登录页面</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/login.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 主页面 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">主页面</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/home.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 巡检任务 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">巡检任务</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/inspection-tasks.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 缺陷上报 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">缺陷上报</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/defect-report.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 消缺任务 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">消缺任务</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/repair-tasks.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>

                <!-- 个人中心 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 text-center">个人中心</h3>
                    <div class="mobile-prototype">
                        <iframe src="mobile/profile.html" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white p-4 text-center mt-12">
        <p>&copy; 2025 工业管道安全巡检系统. All rights reserved.</p>
    </footer>
</body>
</html>